<template>
  <div>
    <div class="overlay">
      <div class="home_img_box">
        <!-- <img src="../../assets/u193.png" width="100%" /> -->
        <div class="indextitle">
          <p class="entitle">Running the lesson:</p>
          <p>师范英语口语情景应答虚拟仿真实验</p>
        </div>

        <el-row class="center_x" style="width: 100%;margin-top: 80px;">
          <button class="home_start_btn" @click="strat">启动实验</button>
        </el-row>
      </div>
    </div>
    <div class="home_body pt_5">
      <Backtotop></Backtotop>
      <el-row class="center_x" :gutter="24">
        <el-col :span="18">
          <MyDivider bck="rgba(235, 244, 255, 1)">
            <div class="flex_y align_item_center">
              <span class="home_divider_font">实验介绍</span><br />
              <span class="home_divider_font">INTRODUCTION</span>
            </div>
          </MyDivider>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="center_x mt_5">
        <el-col :span="4" class="center_x">
          <span class="home_middle_font">所属分类：英语口语</span>
        </el-col>
        <el-col :span="4" class="center_x">
          <span class="home_middle_font">实验课时：6.00</span>
        </el-col>
        <el-col :span="4" class="center_x">
          <span class="home_middle_font">操作步骤:11</span>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="center_x mt_5">
        <el-col style="display:flex;justify-content: center;">
          <p
            style="color: #585555f7; font-size:16px;line-height:25px;width:800px;padding-top:30px;padding-bottom:10px;">
            随着我国教育事业的逐步发展，国民综合素质的大步提高，现今针对学生的外语教育逐步重视，教学中的全英语课堂越发重要，学生的学习不光在跟读和回答问题时，而在于生活中的积累，不管是平时的打招呼，还是学习上出现问题，这时候的每一句话，对于学生来说，都是一个学习的机会。所以，本项目基于更好的发展教学任务为目的，利用先进的虚拟现实技术和语音识别技术，模拟各种课堂任务，包括教学常规、课堂管理、教材处理、学习引导等四个主题十二个场景，旨在让学生能够提前感受到在教学任务中会碰到的一些情况，提高师范学生未来的教学效率。
          </p>
        </el-col>
      </el-row>
      <div class="btnbox">
        <div class="changevideo1" id="changevideo1" @click="showvideo1">
          项目简介视频
        </div>
        <div class="changevideo2" id="changevideo2" @click="showvideo2">
          项目引导视频
        </div>
      </div>
      <el-row :gutter="24" class="center_x">
        <el-col :span="12" class="center_x" v-show="vdflag">
          <video width="800px" height="450px" id="video1" controls src="http://www.simtop.online/video/wgy1.mp4"
            autoplay></video>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="center_x " v-show="!vdflag">
        <el-col :span="12" class="center_x">
          <video width="800px" height="450px" controls id="video2"
            src="http://www.simtop.online/video/wgy2.mp4"></video>
        </el-col>
      </el-row>
      <el-row class="center_x mt_5" :gutter="24">
        <el-col :span="18" class="mt_5">
          <MyDivider bck="rgba(235, 244, 255, 1)">
            <div class="flex_y align_item_center">
              <span class="home_divider_font">实验数据</span><br />
              <span class="home_divider_font">ABOUT EXPERIMENTS</span>
            </div>
          </MyDivider>
        </el-col>
      </el-row>
      <div class="fill_x center_x chartscontainer">
        <div class="fill_center">
          <el-row class="center_x pt_5 charts" :gutter="24">
            <el-col :span="6" class="flex_items">
              <DataCard label="用户总数量" :count="usercount" color="rgb(78, 89, 103)"></DataCard>
            </el-col>
            <el-col :span="6" class="center_x">
              <DataCard label="实验总次数" :count="toalExp" color="rgb(97, 93, 87)"></DataCard>
            </el-col>
            <el-col :span="6" class="center_x">
              <DataCard label="实验总时长" :count="totalTime" color="rgb(77, 114, 132)"></DataCard>
            </el-col>
            <el-col :span="6" class="frx">
              <DataCard label="总访问人数" :count="visitor" color="rgb(177, 74, 72)"></DataCard>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fill_x center_x chartscontainer" style="margin-bottom: 100px">
        <div class="fill_center">
          <el-row class="pt_5 center_x charts" :gutter="24">
            <el-col :span="8" class="flex_items">
              <AreaCountCard></AreaCountCard>
            </el-col>
            <el-col :span="8" class="center_x">
              <PieCard title="用户数量统计分析" :source="userCountSource" itemTitle="用户数量"></PieCard>
            </el-col>
            <el-col :span="8" class="frx">
              <PieCard title="用户成绩分布" :source="userScoreSource" itemTitle="用户成绩"></PieCard>
            </el-col>
          </el-row>
        </div>
      </div>
      <Footer :visitor="visitor"></Footer>
    </div>
  </div>
</template>

<script>
import MyDivider from '../../components/divider/MyDivider.vue'
import DataCard from '../../components/card/DataCard.vue'
import AreaCountCard from '../../components/card/AreaCountCard.vue'
import PieCard from '../../components/card/PieCard.vue'
import Footer from '../../layout/Footer.vue'
import Backtotop from '../../components/backtotop/Backtotop.vue'
// import NavCard from "../../components/card/NavCard.vue";
import Count from '../../api/Count.js'
import RApi from '../../api/ExpRecord.js'
export default {
  data () {
    return {
      vdflag: true,
      usercount: 0, //用户数量
      toalExp: 0, //实验次数
      totalTime: 0, //实验总时间，
      visitor: 0, //用户人数
      userCountSource: [
        { value: 0, name: '中小学生' },
        { value: 0, name: '高职学生' },
        { value: 0, name: '高校学生' },
        { value: 0, name: '教师用户' },
        { value: 0, name: '企业培训用户' }
      ],
      userScoreSource: [
        { value: 0, name: '>=90' },
        { value: 0, name: '80~90' },
        { value: 0, name: '70~80' },
        { value: 0, name: '60~70' },
        { value: 0, name: '<60' }
      ],
      navData: [
        {
          imgSrc: require('../../assets/u449.png'),
          title: '实验目的',
          router: { name: '' }
        },
        {
          imgSrc: require('../../assets/u449.png'),
          title: '实验原理',
          router: { name: '' }
        },
        {
          imgSrc: require('../../assets/u449.png'),
          title: '实验操作',
          router: { name: '' }
        },
        {
          imgSrc: require('../../assets/u449.png'),
          title: '实验答疑',
          router: { name: '' }
        },
        {
          imgSrc: require('../../assets/u449.png'),
          title: '实验报告',
          router: { name: '' }
        },
        {
          imgSrc: require('../../assets/u449.png'),
          title: '实验考核',
          router: { name: '' }
        },
        {
          imgSrc: require('../../assets/u449.png'),
          title: '实验演示',
          router: { name: '' }
        },
        {
          imgSrc: require('../../assets/u449.png'),
          title: '试验记录',
          router: { name: '' }
        }
      ]
    }
  },
  components: {
    MyDivider,
    DataCard,
    AreaCountCard,
    PieCard,
    Footer,
    Backtotop
    // NavCard
  },
  methods: {
    showvideo1 () {
      var btn1 = document.getElementById('changevideo1')
      var btn2 = document.getElementById('changevideo2')
      btn1.style.background = '#c54daa'
      btn1.style.color = '#fff'
      btn2.style.background = '#fff'
      btn2.style.color = '#000'
      if (!this.vdflag) {
        this.vdflag = !this.vdflag
        var vd1 = document.getElementById('video1')
        var vd2 = document.getElementById('video2')
        vd2.pause()
        vd1.play()
      }
    },
    showvideo2 () {
      var btn1 = document.getElementById('changevideo1')
      var btn2 = document.getElementById('changevideo2')
      btn2.style.background = '#c54daa'
      btn2.style.color = '#fff'
      btn1.style.background = '#fff'
      btn1.style.color = '#000'
      if (this.vdflag) {
        this.vdflag = !this.vdflag
        var vd1 = document.getElementById('video1')
        var vd2 = document.getElementById('video2')
        vd1.pause()
        vd2.play()
      }
    },
    loadUserCount () {
      this.$axios.get(Count.userCount).then(res => {
        if (res.data.status === 0) {
          this.usercount = res.data.data
        }
      })
    },
    loadToalExp () {
      this.$axios.get(Count.expCount).then(res => {
        if (res.data.status === 0) {
          this.toalExp = res.data.data
        }
      })
    },
    loadTotalTime () {
      this.$axios.get(Count.expTime).then(res => {
        if (res.data.status === 0) {
          this.totalTime = res.data.data
        }
      })
    },
    loadVisitor () {
      this.$axios.get(Count.visitorCount).then(res => {
        if (res.data.status === 0) {
          this.visitor = res.data.data
        }
      })
    },
    loadRoleCountSource () {
      this.$axios.get(Count.role).then(res => {
        if (res.data.status === 0) {
          this.userCountSource = res.data.data
        }
      })
    },
    loadUserScoreSource () {
      this.$axios.get(Count.score).then(res => {
        if (res.data.status === 0) {
          //重新引用
          let se = [
            { value: 0, name: '>=90' },
            { value: 0, name: '80~90' },
            { value: 0, name: '70~80' },
            { value: 0, name: '60~70' },
            { value: 0, name: '<60' }
          ]
          let rArray = res.data.data
          for (let i = 0; i < 5; i++) {
            if (rArray[`c${i}`]) {
              se[i].value = rArray[`c${i}`]
            } else {
              se[i].value = 0
            }
          }
          this.userScoreSource = se
        }
      })
    },
    strat () {
      this.axios
        .post(RApi.add, {
          params: 1,
          username: this.$store.state.user.username,
          school: this.$store.state.user.school,
          experimentName: '分散实验',
          courseName: '	电商小件商品快速拣货决策虚拟仿真实验'
        })
        .then(res => {
          if (res.data.status == 0) {
            localStorage.setItem('exId', res.data.data) //实验记录Id
            localStorage.setItem('userId', this.$store.state.user.id)
            localStorage.setItem('school', this.$store.state.user.school)
            localStorage.setItem('username', this.$store.state.user.username)
            localStorage.setItem('group', '个人')
            // localStorage.setItem("teacher", row.username);
            localStorage.setItem('experimentName', '分散实验')
          }
          window.location.href = '/testvoice/'
        })
    }
  },
  mounted () {
    this.loadVisitor()
    this.loadRoleCountSource()
    this.loadUserScoreSource()
    this.loadUserCount()
    this.loadToalExp()
    this.loadTotalTime()
  }
}
</script>

<style>
.overlay {
  width: 100%;
  height: 735px;
  background-image: url("../../assets/intro-bg.jpg");
  background-size: 100% 100%;
}
.home_img_box {
  /* margin-left: -10px;
  margin-right: -10px; */
  width: 100%;
  height: 735px;
  background: linear-gradient(
    to bottom,
    rgba(27, 113, 214, 0.5) 0%,
    rgba(197, 77, 170, 0.5) 100%
  );
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}
.home_body {
  background-color: rgba(235, 244, 255, 1);
  /* margin-left: -10px;
  margin-right: -10px; */
}
.home_middle_font {
  color: #c54daa;
  font-size: 16px;
}
.home_divider_font {
  font-size: 25px;
  color: #c54daa;
}
.home_nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  grid-row-gap: 20px;
}
.home_start_btn {
  left: 42%;
  font-size: 3em;
  background-color: #c54daa;
  color: white;
  padding: 5px 50px 5px 50px;
  border-radius: 60px;
  border-color: white white white white;
  border-style: solid;
  border-width: 5px;
  cursor: pointer;
}
p {
  line-height: 240%;
  font-size: 15px;
  text-indent: 2em;
}
li {
  line-height: 240%;
  font-size: 15px;
}
.btnbox {
  width: 800px;
  margin: 0 auto;
  display: flex;
}
.changevideo1 {
  width: 150px;
  height: 40px;
  background: #c54daa;
  color: white;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin: 10px 10px 10px 0;
  font-size: 15px;
}
.changevideo2 {
  width: 150px;
  height: 40px;
  background: white;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin: 10px 10px 10px 0;
  background: white;
  color: black;
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  cursor: pointer;
}

.indextitle {
  width: 970px;
  margin: 0 auto;
  margin-top: 300px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: white;
  font-size: 60px;
  font-weight: 600;
}
.indextitle p {
  text-align: left;
  font-size: 60px;
  text-indent: 0;
}
.entitle {
  font-size: 35px !important;
  padding-bottom: 10px;
  font-weight: 300;
}
.charts {
  max-width: 1111px;
}
.fill_center {
  display: flex;
  justify-content: center;
}
</style>
